<template>
  <!-- v-model="show" -->
  <el-dialog
    :model-value="show"
    :title="title"
    :width="width"
    center
    onCancel
    :before-close="onCancel"
    :close-on-click-modal="onClickModal || false"
    :destroy-on-close="destroyOnClose"
  >
    <!-- 信息 -->
    <template v-if="type === 'hint'">
      <span>{{ hint }}</span>
    </template>

    <!-- 表单 -->
    <template v-else-if="type === 'form'">
      <WForm
        ref="formRef"
        :data="form?.data"
        :columns="form?.columns || []"
        v-bind="{ form }"
        @onSuccess="onSuccess"
        @onCancel="onCancel"
      />
    </template>

    <!-- 插槽 -->
    <template v-else-if="type === 'slot'">
      <slot></slot>
    </template>

    <template #footer>
      <slot name="footer" :formRef="formRef">
        <w-button @click="onCancel">取消</w-button>
        <w-button @click="onSuccess">确定</w-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// import { ref, reactive, onMounted, Ref } from "vue";
import type { AlertType } from "./interface/";
import WForm from "@/components/Form/index.vue";

interface Emit {
  (event: "onSuccess", n: unknown): void;
  (event: "onCancel"): void;
}

let emit = defineEmits<Emit>();
const props = withDefaults(defineProps<AlertType.Props>(), {});
const formRef = ref();

const onSuccess = async () => {
  let isOk: any;
  if (formRef.value) {
    isOk = await formRef.value.onSubmit();
  } else {
    isOk = { is: true, info: {} };
  }
  emit("onSuccess", isOk);
};

const onCancel = () => {
  emit("onCancel");
};
</script>

<style scoped></style>
